<template>
  <div
    :style="envMode === 'DEV' ? 'height: 100%;' : ''"
  >
    <div
      class="bgc"
      :style="envMode === 'DEV' ? 'height: 100%;' : ''"
    >
      <div
        v-if="envMode === 'WG' || envMode === 'ALL'"
        class="balls-wrapper"
        :style="{
          'grid-template-columns':
            '165px 220px 165px 220px 165px',
          'grid-template-rows':'repeat(3,1fr)'
        }"
      >
        <Ball
          name="金桥生产主集群"
          @click="showJQProdModal = true"
        />
        <Arrow />
        <Ball
          name="万国热备集群"
          @click="showWGHotModal = true"
        />
        <Arrow />
        <Ball
          name="离线集群"
          @click="() => {
            offlineClusterVisible = true
          }"
        />
        <div />
        <Arrow
          :rotate="120"
          :style="'margin-left: 10rem;'"
          :length="300"
        />
        <Arrow
          :rotate="60"
          :style="'margin-left: 13.3rem;'"
          :length="300"
        />
        <div />
        <div />
        <div />
        <Ball
          name="万国UAT集群"
          @click="
            ()=>{
              // cFlag = true
            }
          "
        />
        <div />
        <Ball
          name="DEV集群"
          @click="() => {
            if(envMode === 'WG'){
              return
            }
            dFlag = true
          }"
        />

      </div>

      <div
        v-else-if="envMode === 'DEV'"
        class="balls-wrapper"
        :style="{
          'grid-template-columns':
            '165px 220px 165px',
        }"
      >
        <Ball
          name="万国热备集群"
        />
        <Arrow />
        <Ball
          name="DEV集群"
          @click="() => {
            dFlag = true
          }"
        />
      </div>
    </div>

    <el-dialog
      v-if="showJQProdModal"
      :close-on-click-modal="false"
      :before-close="aCloses"
      :visible.sync="showJQProdModal"
      title="金桥生产主集群配置"
      width="1000px"
    >
      <el-tabs
        v-model="activeName"
        type="border-card"
        style="box-shadow: none"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="集群基础配置"
          name="1"
        >
          <jqBasic />
        </el-tab-pane>
        <!-- <el-tab-pane
          label="热备基础配置"
          name="2"
        >
          <hotStandby />
        </el-tab-pane> -->
      </el-tabs>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :before-close="bCloses"
      :visible.sync="showWGHotModal"
      title="万国热备集群配置"
      width="90%"
    >
      <el-tabs
        v-model="bActiveName"
        style="box-shadow: none"
        type="border-card"
      >
        <el-tab-pane
          label="集群基础配置"
          name="1"
        >
          <WanguoHotCluster
            v-if="showWGHotModal"
            @bCloses="bCloses"
            @bNext="bNext"
          />
        </el-tab-pane>
        <!--<el-tab-pane
          label="灾备基础配置"
          name="2"
        >
          <disaster-recovery-conf />
        </el-tab-pane>
        <el-tab-pane
          label="灾备过滤清单"
          name="3"
        >
          <disaster-recovery-blacklist />
        </el-tab-pane>
        <el-tab-pane
          label="灾备执行记录"
          name="4"
        >
          <disaster-recovery-log />
        </el-tab-pane>
        -->
        <el-tab-pane
          label="UAT数据同步"
          name="9"
        >
          <UatSync />
        </el-tab-pane>
        <el-tab-pane
          label="UAT同步黑名单"
          name="blackList"
        >
          <BlackList />
        </el-tab-pane>
        <!-- <el-tab-pane
          label="热备删除稽核记录"
          name="10"
        >
          <hot-standby-deletion-audit />
        </el-tab-pane> -->

        <el-tab-pane
          label="开发数据导出"
          name="8"
        >
          <data-export-log ref="WGReset"/>
        </el-tab-pane>

        <el-tab-pane
          label="开发脱敏配置"
          name="6"
        >
          <desensitization-fields ref="desensitizationReset"/>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <OfflinCluster
      :dialog-visible="offlineClusterVisible"
      @close="offlineClusterVisible = false"
    />

    <el-dialog
      v-if="cFlag"
      :close-on-click-modal="false"
      :before-close="cCloses"
      :visible.sync="cFlag"
      title="万国UAT集群配置"
      width="1100px"
    >
      <WGUAT @wgUTAcate="wgUTAcate" />
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :before-close="dCloses"
      :visible.sync="dFlag"
      title="DEV集群配置"
      width="90%"
      top="5vh"
    >
      <el-tabs
        v-model="dActiveName"
        type="border-card"
        style="box-shadow: none;"
      >
        <!-- <el-tab-pane
          label="集群基础配置"
          name="1"
        >
          <WGDEV
            @next="next"
            @dCloses="dCloses"
          />
        </el-tab-pane> -->
        <el-tab-pane
          label="开发数据导入"
          name="1"
        >
          <data-import-log ref="dev"/>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
// 金桥生产主集群
import jqBasic from './JinQiao/BasicConfig'
import WanguoHotCluster from './WanguoHotCluster/ClusterBasic'
import UatSync from './WanguoHotCluster/UatSync/index.vue'
import Ball from './Ball'
import WGUAT from './WGUAT'
import Arrow from './Arrow'
import BlackList from './WanguoHotCluster/BlackList/index.vue'
import dataImportLog from './WGDEV/DataImportLog'
import desensitizationFields from './WanguoHotCluster/desensitizationFields/index'
import dataExportLog from './WanguoHotCluster/dataExportLog/index'

import OfflinCluster from './offLineCluster/index.vue'

export default {
  components: {
    dataImportLog,
    Ball,
    jqBasic,
    WanguoHotCluster,
    UatSync,
    WGUAT,
    Arrow,
    BlackList,
    desensitizationFields,
    dataExportLog,
    OfflinCluster
  },
  props: {
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      envMode: process.env.VUE_APP_ENV,
      sidebarElm: null,
      activeName: '1',
      bActiveName: '1',
      dActiveName: '1',
      eActiveName: '1',
      showJQProdModal: false,
      showWGHotModal: false,
      cFlag: false,
      dFlag: false,
      offlineClusterVisible: false,
      jinqiaoNum: 0
    }
  },
  mounted() {
    this.getJngqiaoData()

    // 监听侧边栏的变化
    this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    this.sidebarElm &&
    this.sidebarElm.addEventListener(
      'transitionend',
      this.sidebarResizeHandler
    )
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHandler)
    }

    this.sidebarElm &&
    this.sidebarElm.removeEventListener(
      'transitionend',
      this.sidebarResizeHandler
    )
  },
  methods: {
    getJngqiaoData() {
      // var data = {}
      // requestData
      //   .TableSyncTotal(data)
      //   .then((data) => {
      //     this.jinqiaoNum = data.总记录数
      //   })
      //   .catch(() => { })
    },
    sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.__resizeHandler()
      }
    },
    aCloses() {
      this.$confirm('是否关闭页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.activeName = '1'
          this.showJQProdModal = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    cCloses() {
      this.$confirm('是否关闭页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.cFlag = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    dCloses() {
      this.$confirm('是否关闭页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.dActiveName = '1'
          this.dFlag = false
          this.$refs.dev.crud.resetQuery(true)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    eCloses() {
      this.$confirm('是否关闭页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.offlineClusterVisible = false
          this.eActiveName = '1'
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    next() {
      this.dActiveName = '2'
    },
    bCloses() {
      this.$confirm('是否关闭页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.bActiveName = '1'
          this.showWGHotModal = false
          this.$refs.WGReset.crud.resetQuery(true)
          this.$refs.desensitizationReset.crud.resetQuery(true)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    bNext() {
      this.bActiveName = '2'
    },
    wgUTAcate() {
      this.cFlag = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.bgc {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../../../../assets/images/galaxy.jpeg");
  background-size: cover;
  background-position: center center;
}

.balls-wrapper {
  width: 550;
  display: grid;
  justify-items: center;
  align-items: center;
}

.arrowfont {
  color: #f4516c;
  position: absolute;
  top: 0;
  left: 56%;
  font-size: 16px;
  font-weight: bold;
}

.bottom-arrow {
  position: relative;
  top: -80%;
  width: 50px;
  height: 150px;
  -moz-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.bottom-arrow-right {
  position: relative;
  left: -50%;
  top: -160%;
  width: 50px;
  height: 150px;
  -moz-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
</style>
